<template>
  <a-card :bordered="false" :style="{ minHeight: `${layoutContentHeight - pageHeaderHeight - layoutFooterHeight}px` }">
    <!-- 搜索栏 start -->
    <div>
      <span>{{ $t('common.status') }}：</span
      ><a-select
        class="search-btn"
        style="width: 150px"
        @change="
          value => {
            selectStatus = value;
          }
        "
        :value="selectStatus"
      >
        <a-select-option value>{{ $t('common.all') }}</a-select-option>
        <a-select-option :value="1">{{ $t('common.enabled') }}</a-select-option>
        <a-select-option :value="2">{{ $t('common.disabled') }}</a-select-option>
      </a-select>
      <a-button class="search-btn" type="primary" icon="search" @click="query">{{ $t('common.query') }}</a-button>
      <a-button class="search-btn" icon="reload" @click="reset">{{ $t('common.reset') }}</a-button>
    </div>
    <!-- 搜索栏 end -->

    <!-- table start -->
    <s-table
      ref="table"
      size="default"
      :rowKey="record => record.id"
      :columns="columns"
      :data="loadData"
      :alert="false"
      :showPagination="false"
      :scroll="{ x: tableWidth }"
    >
      <template slot="menuTitle" slot-scope="text">
        <span class="fixTitle" :title="text">{{ $t(text) }}</span>
      </template>
      <span slot="actions" slot-scope="text, record" v-show="record.actions">
        <a-tag :title="item.name" class="aTag" v-for="item in record.actions" :key="item.action">{{
          $t(item.name)
        }}</a-tag>
      </span>
      <span slot="status" slot-scope="text">{{ displayStatus(text) }}</span>
      <!-- 父节点是启用 或者 顶级节点的时候 -->
      <span slot="action" slot-scope="text, record" class="actionsList">
        <!-- 如果搜索禁用 但父节点是启用状态的话  显示--不可操作  -->
        <template v-if="queryStatus === 2 && record.parentStatus === 1">
          <span>--</span>
        </template>
        <template v-else>
          <a-popconfirm v-if="record.status === 1" @confirm="handleBanOrStart(record)">
            <div slot="title">要禁用此权限配置吗？</div>
            <a :disabled="!record.parentId ? false : record.parentStatus === 2" v-action:disable>{{
              $t('button.disable')
            }}</a>
          </a-popconfirm>
          <a-popconfirm v-else @confirm="handleBanOrStart(record)">
            <div slot="title">要启用此权限配置吗？</div>
            <a :disabled="!record.parentId ? false : record.parentStatus === 2" v-action:enable>{{
              $t('button.enable')
            }}</a>
          </a-popconfirm>
        </template>
      </span>
    </s-table>
    <!-- table end -->
  </a-card>
</template>

<script>
import { STable } from '@/components'
import { breadFirstTree } from '@/utils/util'
import { layoutMixin } from '@/utils/mixin'
import { getPermList, startOrBanPerm } from '@/api/authenticationCenter/config/menu'

export default {
  name: 'MenuConfig',
  mixins: [layoutMixin],
  components: {
    STable
  },
  data () {
    return {
      queryStatus: '', // 当前查询的状态
      selectStatus: '', // 选择的状态
      loadData: () => {
        const params = {
          status: this.queryStatus,
          appId: 0
        }
        return getPermList(params)
          .then(res => {
            const perms = res.data
            breadFirstTree(
              perms,
              jn => {
                if (jn.children && Array.isArray(jn.children)) {
                  jn.children.forEach(i => {
                    i.parentStatus = jn.status
                  })
                }
                return true
              },
              'children'
            )
            return {
              data: perms
            }
          })
          .catch(() => {
            return {
              data: []
            }
          })
      }
    }
  },
  computed: {
    displayStatus () {
      return function (status) {
        if (this.queryStatus === 2 && status === 1) {
          return '--'
        }
        if (status === 1) {
          return this.$t('common.normal')
        }
        return this.$t('common.disabled')
      }
    },
    columns () {
      let colums = [
        {
          title: this.$t('authenticationCenter.menu.title'),
          dataIndex: 'title',
          width: 300,
          scopedSlots: {
            customRender: 'menuTitle'
          },
          ellipsis: true,
          fixed: 'left'
        },
        {
          title: this.$t('authenticationCenter.menu.menuConfig'),
          dataIndex: 'name',
          width: 300,
          ellipsis: true
        },
        {
          title: this.$t('authenticationCenter.menu.path'),
          dataIndex: 'path',
          width: 200,
          ellipsis: true
        },
        {
          title: this.$t('authenticationCenter.menu.redirect'),
          dataIndex: 'redirect',
          width: 200,
          ellipsis: true
        },
        {
          title: this.$t('authenticationCenter.menu.componentName'),
          dataIndex: 'component',
          width: 180,
          ellipsis: true
        },
        {
          title: this.$t('authenticationCenter.menu.actions'),
          key: 'actions',
          width: 300,
          scopedSlots: {
            customRender: 'actions'
          }
        },
        {
          title: this.$t('common.status'),
          dataIndex: 'status',
          scopedSlots: {
            customRender: 'status'
          },
          width: 80
        }
      ]
      if (this.$auth('start,disable', this.$route.meta.permissionId)) {
        colums = colums.concat({
          title: this.$t('common.action'),
          dataIndex: 'action',
          width: 100,
          scopedSlots: {
            customRender: 'action'
          },
          fixed: 'right'
        })
      }
      return colums
    },
    tableWidth () {
      const width = this.columns.reduce((last, next) => {
        last += next.width
        return last
      }, 0)
      return width
    }
  },
  methods: {
    reset () {
      this.selectStatus = ''
      this.queryStatus = ''
      this.$refs.table.refresh(true)
    },
    query () {
      this.queryStatus = this.selectStatus
      this.$refs.table.refresh(true)
    },
    handleBanOrStart (record) {
      const { id, status } = record
      startOrBanPerm({
        id,
        status: status === 1 ? 2 : 1
      }).then(res => {
        this.$message.success(res.message)
        this.$refs.table.refresh(true)
      })
    }
  }
}
</script>
